<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>搜索</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <script src="js/dynamicitem.js"></script>
    <script src="js/reachbottom.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="js/flyzoom.js"></script>
    <style>
        .label {
            line-height: 2em;
            height: 2em;
            padding: 0 5px;
            border-radius: 5px;
        }

        .top {
            border-bottom: 1px solid #e8e8e8;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            z-index: 200;
            background: #F6F6F9
        }

        .icon {
            font-size: 24px;
            line-height: 40px;
            margin: 5px 0;
            color: #07C160;
            -webkit-transition: font-size 0.5s ease-out 0s;
            -moz-transition: font-size 0.5s ease-out 0s;
            transition: font-size 0.5s ease-out 0s;
        }
    </style>
</head>

<body ontouchstart>
    <div class="top">
        <header class='weui-header'>
            <div class="weui-search-bar" id="searchBar">
                <form id="searchForm" class="weui-search-bar__form" action="JavaScript：return true;">
                    <div class="weui-search-bar__box">
                        <i class="weui-icon-search"></i>
                        <input type="search" confirm-type="search" class="weui-search-bar__input" id="searchInput"
                            placeholder="搜索您想要的动态" required>
                        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                    </div>
                    <label class="weui-search-bar__label" id="searchText"
                        style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                        <i class="weui-icon-search"></i>
                        <span>搜索您想要的动态</span>
                    </label>
                </form>
                <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
            </div>
        </header>
    </div>
    <div style="height:44px;"></div>
    <div class="page-bd-15" style="display: flex;justify-content: space-between; align-items: center;">
        <h4 class="weui-media-box__title  ">搜索历史</h4><span class="icon icon-26 labeldelete"></span>
        <!-- <span class="icon icon-26" id="test">搜索</span> -->
    </div>
    <div class="weui-label-list" id="searchlist">
    </div>
    <div id="searchdynamiclist">

    </div>
    <div class="weui-loadmore" id="more0">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
    <div style="height: 100px;"></div>
    <div id='tb' class="weui-tab" style="height:auto;">
        <div class="weui-tabbar tab-bottom">
            <a href="index.html" class="weui-tabbar__item">
                <i class="icon icon-27 f27 weui-tabbar__icon"></i>
                <p class="weui-tabbar__label">社区</p>
            </a>
            <a href="search.html" class="weui-tabbar__item ">
                <i class="icon icon-4 f27 weui-tabbar__icon"></i>
                <p class="weui-tabbar__label f-green">搜索</p>
            </a>
            <a href="mine.html" class="weui-tabbar__item ">
                <i class="icon icon-30 f27 weui-tabbar__icon"></i>
                <p class="weui-tabbar__label">我的</p>
            </a>
        </div>
    </div>
</body>

</html>
<script type="text/html" id="searchlisttemp">
    {{each list item}}
    <label class="label f-gray b-green">{{item}}</label>
    {{/each}}
</script>
<script>

    lobsterh5.main({
        data: {
            searchlist: [],
            dynamiclist: [],
            tabindex: 0,
            pagelist: [{
                page: 1,
                limit: 10,
                hasmore: true,
                isloading: false,
            },],
            searchkey: "",
        },
        //初始化页面
        pageload: function () {
            jQuery.noConflict();
            var self = this;
            self.initevent();  
            self.data.searchlist = JSON.parse(lobsterh5.GetPageStorage("communitysearchlist")||"[]"); 
            if (self.data.searchlist.length > 0) {
                var html = template("searchlisttemp", { list: self.data.searchlist });
                $("#searchlist").html(html);
            }
            self.getDynamicList();
        },
        //初始化事件
        initevent: function () {
            var self = this;
            $(window).lobsterreachbottom({
                onSuccess: function () {
                    if (self.data.tabindex == 0)
                        self.getDynamicList();
                }
            });
            $('#searchForm').on('submit', function (event) {
                //拦截表单默认提交事件
                event.preventDefault();
                //获取input框的值，用ajax提交到后台
                self.data.searchkey = $('#searchInput').val();
                self.data.pagelist[self.data.tabindex].page = 1;
                self.data.pagelist[self.data.tabindex].hasmore = true;
                $("#searchdynamiclist").html("");
                self.getDynamicList(function () {
                    if (self.data.searchkey) {
                        var filter = self.data.searchlist.filter(a => { return a == self.data.searchkey });
                        if (filter.length > 0) return;
                        self.data.searchlist.push(self.data.searchkey);
                        if (self.data.searchlist.length > 5)
                            self.data.searchlist.shift();
                        lobsterh5.SetPageStorage("communitysearchlist", JSON.stringify(self.data.searchlist));
                        var html = template("searchlisttemp", { list: self.data.searchlist });
                        $("#searchlist").html(html);
                    }
                });
            });
            $("#searchlist").on("click", "label", function () {
                $("label").removeClass("f-white").removeClass("bg-green").addClass("f-gray").addClass("b-green");
                $(this).addClass("f-white").addClass("bg-green").removeClass("f-gray").removeClass("b-green");
                self.data.searchkey = $(this).text();
                self.data.pagelist[self.data.tabindex].page = 1;
                self.data.pagelist[self.data.tabindex].hasmore = true;
                $("#searchdynamiclist").html("");
                self.getDynamicList();
            })
            $(".labeldelete").click(function () {
                $.confirm("提示", "确定删除所有搜索历史吗？", function () {
                    lobsterh5.SetPageStorage("communitysearchlist", []);
                    $("#searchlist").html("");
                })
            })
            $("#test").click(function () {
                self.data.searchkey = $('#searchInput').val();
                self.data.pagelist[self.data.tabindex].page = 1;
                self.data.pagelist[self.data.tabindex].hasmore = true;
                $("#searchdynamiclist").html("");
                self.getDynamicList(function () {
                    if (self.data.searchkey) {
                        var filter = self.data.searchlist.filter(a => { return a == self.data.searchkey });
                        if (filter.length > 0) return;
                        self.data.searchlist.push(self.data.searchkey);
                        if (self.data.searchlist.length > 5)
                            self.data.searchlist.shift();
                        lobsterh5.SetPageStorage("communitysearchlist", JSON.stringify(self.data.searchlist));
                        var html = template("searchlisttemp", { list: self.data.searchlist });
                        $("#searchlist").html(html);
                    }
                });
            })
        },
        getDynamicList(success) {
            var self = this;
            var tabindex = self.data.tabindex;
            if (!self.data.pagelist[tabindex].hasmore) return;
            $("#more" + tabindex).show();
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetDynamicList", {
                page: self.data.pagelist[tabindex].page,
                limit: self.data.pagelist[tabindex].limit,
                userId: localStorage.getItem("userId"),
                searchkey: self.data.searchkey,
            }).then(res => {
                $("#searchdynamiclist").lobsterdynamicitem({
                    list: res, userId: self.data.userId, btns: {
                        deletebtn: true,
                        reportbtn: true,
                        followbtn: true
                    }
                })
                if (res.length < self.data.pagelist[tabindex].limit) {
                    self.data.pagelist[tabindex].hasmore = false;
                    $("#more" + tabindex).text("没有更多了");
                } else {
                    $("#more" + tabindex).hide();
                    self.data.pagelist[tabindex].page++;
                }
                self.data.pagelist[tabindex].isloading = true;
                if (success)
                    success();
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        },
    }); 
</script>